<template>
	<view class="">			
	<navBar isBack title="我的案例"></navBar>
	<view class="titleTop" :style="'top:'+postionHeight+'rpx;'">
		<view class="wrap">
			<view class="title-left df-ct" @click="openSelect">
				<text class="left-txt">筛选</text>
				<text class="iconfont icon-sanjiaoshang" :class="{'iconActive':postionSatatus}"></text>
			</view>
			<view class="search-box">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" v-model="keyword" @input="searchChange" confirm-type="搜索" @confirm="toSearch" value="" placeholder="搜索我的案例"/>
			</view>
		</view>
		<!-- 筛选选项 -->
		<view class="selectItem" :class="{'positionActive':postionSatatus}">
			<view class="item">
				<span>类型</span>
				<scroll-view class="scrollBox" scroll-x="true" >
					<view class="select" :class="{'selectActive':index==typeIndex}" @click="selectType(index)" v-for="(item,index) in caseType" :key="index">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="item">
				<span>面积</span>
				<scroll-view class="scrollBox" scroll-x="true" >
					<view class="select" :class="{'selectActive':index==areaIndex}" @click="selectArea(index)" v-for="(item,index) in styleList.area_section" :key="index">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="item">
				<span>风格</span>
				<scroll-view class="scrollBox" scroll-x="true" >
					<view class="select" :class="{'selectActive':index==styleIndex}" @click="selectStyle(index)" v-for="(item,index) in styleList.design_style" :key="index">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="item">
				<span>预算</span>
				<scroll-view class="scrollBox" scroll-x="true" >
					<view class="select" :class="{'selectActive':index==offerIndex}" @click="selectOffer(index)" v-for="(item,index) in styleList.budget_section" :key="index">{{item.name}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<view class="container">		
		<view class="content" v-for="(item,index) in list" :key="item.id">
			<view class="title" @tap="handleDetail(item.id)">{{item.title}}</view>
			<view class="text">
				<template v-if="Array.isArray(item.design_style)">
					<view class="biaoqing"><span v-for="(v,i) in item.design_style" :key="i">{{v.name}}</span></view>
				</template>
				<template v-else>
					<view class="biaoqing"><span>{{item.design_style.name}}</span></view>
				</template>
				<text class="offer">报价：{{item.offer}}万</text>
				<text class="area offer">{{item.area}}m² | {{item.house_type}}</text>
			</view>
			<view class="swiper-content"  @tap="handleDetail(item.id)">
		<!-- <bw-img-upload style="width:100%" ></bw-img-upload> -->
				<!-- <view class="num" v-if="item.type==0">{{swiperNum}}/{{Array.isArray(item.thumb_url)?item.thumb_url.length:1}}</view> -->
				<template v-if="item.type==0">
					<swiper class="swiper" @animationfinish="swiperChange" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<template v-if="Array.isArray(item.thumb_url)">
							<view v-for="(v,i) in item.thumb_url" :key="i">
								<swiper-item>							
									<image :src="v.path" mode=""></image>
								</swiper-item>
							</view>	
						</template>
						<template v-else>
							<view>
								<swiper-item>
									<image :src="item.thumb_url.path" mode=""></image>
								</swiper-item>
							</view>	
						</template>
					</swiper>
				</template>
				 <template v-else>
					  <video  class="video" :src="item.media.path" :poster="item.media.cover" controls mode=""></video>
					  <text class="iconfont icon-bofang df-ct"></text>
				  </template>
				
			</view>
			<view class="bottom df-bt">
				<view class="left df-ar">
					<view>
						<text class="iconfont icon-fenxiang"></text>
						<text>{{item.forward_num}}</text>
					</view>
					<view>
						<text class="iconfont icon-pinglun"></text>
						<text>{{item.comment_num}}</text>
					</view>
					<view>
						<text class="iconfont icon-shoucan"></text>
						<text>{{item.support_num}}</text>
					</view>
				</view>
				<view class="right" @tap="handleDel(item.id)">
					删除
				</view>
				
			</view>
			<!-- <u-modal v-model="show" :content="content" show-cancel-button="true" @confirm="handleDelete(item.id)"></u-modal> -->
		</view>
		<!-- <loading-Text :loading='loading' :noMore='noMore'></loading-Text> -->
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>
	</view>
</template>

<script>
	import loadingText from '@/pages_decoration/components/loading-text/loadingText.vue';
	import service_decoration from '@/service/decoration.js'
		export default {
			components:{
				loadingText
			},
			data() {
				return {
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了~'
					},
					list:[],	
					baseimg:this.$static,				
					indicatorDots: true,
					autoplay: false,
					interval: 2000,
					duration: 500,
					currentSwiper:0,
					swiperNum:0,
					show:false,
					content:'确定要删除此案例吗',
					page:1,
					pagesize:10,
					loading:false,
					noMore:false,
					typeIndex:0,
					areaIndex:0,
					styleIndex:0,
					offerIndex:0,
					keyword:'',
					postionSatatus:false,
					navHeight:200,
					postionHeight:184,
					styleList:{},
					caseType:[{
						name:'设计案例',
						value:'desgin'
					},{
						name:'施工案例',
						value:'build'
					}],
				}
			},
			onLoad(options) {
				console.log(this.type,'案例类型')
				this.postionHeight = this.$store.state.system.navBarHeight*2
				this.swiperNum = 1
				this.getCaseStyle()
				// this.getIndexData()
			},
			onReachBottom() {
				this.page++ 
				this.status = 'loading'
				let sid = this.$store.state.index.sid
				let type = this.caseType[this.typeIndex].value
				let style = this.styleList.design_style[this.styleIndex].id
				let area = this.styleList.area_section[this.areaIndex].value
				let offer = this.styleList.budget_section[this.offerIndex].value
				console.log(style,area,offer,'=======')
				let params = {
					decoration_id:sid,
					type,
					keyword:this.keyword,
					style,
					area,
					offer,
					page:this.page,
					pagesize:this.pagesize
				}
				service_decoration.getDecorationCase(params).then(res=>{
					console.log(res,'案例列表')	
					if(res.code==1){
						if(!res.data.length){
							this.status = 'nomore'
						}else{
							this.status = 'loading'
						}
						this.list = this.list.concat(res.data)
					}
				})
			},
			methods:{
				// 获取筛选风格列表
				async getCaseStyle(){
					let res = await this.$api.getStyle()
						console.log(res,'案例风格列表')
						if(res.code==1){
							res.data.area_section.unshift({name:'全部',value:''})
							res.data.design_style.unshift({name:'全部',value:''})
							res.data.budget_section.unshift({name:'全部',value:''})
							this.styleList = res.data?res.data:{},
							this.getIndexData()
						}
				},
				// 选择类型
				selectType(index){
					this.typeIndex = index
					this.getIndexData()
				},
				// 选择面积
				selectArea(index){
					this.areaIndex = index
					this.getIndexData()
				},
				// 选择风格
				selectStyle(index){
					this.styleIndex = index
					// console.log(this.styleList.design_style[index].value,'0000')
					this.getIndexData()
				},
				// 选择预算
				selectOffer(index){
					this.offerIndex = index
					this.getIndexData()
				},
				// 点击筛选
				openSelect(){
					if(this.postionSatatus){
						this.postionSatatus=false
					}else{
						this.postionSatatus = true
					}
				},
				// 输入后搜索
				toSearch(){
					this.getIndexData()
				},
				// 输入搜索值变化
				searchChange(){
					if(this.keyword==''){
						this.getIndexData()
					}
				},
				
				// 案例列表
				getIndexData(){
					this.page = 1
					uni.showLoading({
						title:'加载中...'
					})
					console.log(this.styleList,'thisthisthis')
					let sid = this.$store.state.index.sid
					let type = this.caseType[this.typeIndex].value
					let style = this.styleList.design_style[this.styleIndex].id
					let area = this.styleList.area_section[this.areaIndex].value
					let offer = this.styleList.budget_section[this.offerIndex].value
					console.log(style,area,offer,'=======')
					let params = {
						decoration_id:sid,
						type,
						keyword:this.keyword,
						style,
						area,
						offer,
						page:this.page,
						pagesize:this.pagesize
					}
					service_decoration.getDecorationCase(params).then(res=>{
						console.log(res,'案例列表')	
						if(res.code==1){
							if(res.data.length<10){
								this.status = 'nomore'
							}
							this.list = res.data?res.data:[]
						}
					})
					uni.hideLoading()
				},
				handleDel(id){
					uni.showModal({
						title:'提示',
						content:'确定要删除该案例吗？',
						success:res=>{
							if(res.confirm){
								let params = {
									id,
									type:this.caseType[this.typeIndex].value,
								}
								service_decoration.delDecorationCase(params).then(res=>{
									console.log(res,"删除案例结果")
									if(res.code==1){
										this.getIndexData()
										uni.showToast({
											title:'删除成功',
											icon:'success'
										})
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none'
										})
									}
								})
							}
						}
					})
				},
				handleDetail(e){
					console.log(e,"详情页ID");
					let id = e;
					let type = this.caseType[this.typeIndex].value
					console.log(type,'类型类型')
					uni.navigateTo({
						url:`/pages_decoration/home/case/detail?id=${id}&type=${type}`
					})
				},
				swiperChange(e) {
					this.currentSwiper = e.detail.current
					this.swiperNum = e.detail.current+1
					console.log(this.currentSwiper,"下标")
				},
			}
		}
</script>

<style scoped lang="less">
	.swiper {
		height: 272rpx;
	}
	.swiper-item {
		display: block;
		height: 272rpx;
		line-height: 272rpx;
		text-align: center;
	}
	.titleTop{
		height: 114rpx;
		width: 100%;
		position: fixed;
		left: 0;
		top: 184rpx;
		z-index: 10;
		background-color: #fff;
		.wrap{
			height: 114rpx;
			align-items: center;
			padding: 24rpx;
			width: 100%;
			display: flex;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			background-color: #fff;
		}
		.title-left{
			width: 20%;
			font-size: 24rpx;
			color: #505050;
			.left-txt{
				
			}
			.icon-sanjiaoshang{
				transition: 0.2s;
			}
			.iconActive{
				transform: rotate(180deg);
			}
		}
		.search-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 66rpx;
			background: #F5F5F5;
			border-radius: 34rpx;
			padding: 0;
			input{
				width: 90%;
				height: 100%;
				margin-left: 10rpx;
				color: #A0A0A0;
			}
			.icon-sousuo{
				color: #505050;
				margin-left: 28rpx;
			}
		}
		.selectItem{
			position: absolute;
			top:-230rpx;
			transition: .2s;
			left: 0;
			z-index: 2;
			background-color: #fff;
			width: 100%;
			padding: 0 0 28rpx 28rpx;
			box-shadow: 0px 12rpx 12rpx rgba(0, 0, 0, 0.06);
			.item{
				margin-top: 34rpx;
				font: 500 26rpx/40rpx PingFang SC;
				color: #0A0605;
				display: flex;
				align-items: center;
				span{flex-shrink: 0;}
				.scrollBox{
					width: 100%;
					padding-right: 90rpx;
					margin-left: 40rpx;
					white-space: nowrap;
					.select{
						margin-right: 24rpx;
						display: inline-block;
						font: 400 22rpx/40rpx PingFang SC;
						color: #505050;
						padding: 0 16rpx;
					}
					.selectActive{
						background-color: rgba(219,169,84,0.1);
						color: #DBA954;
						border-radius: 26rpx;
					}
				}
			}
		}
		.positionActive{
			top: 114rpx;
		}
	}
	.container{
		padding: 0rpx 24rpx;
		margin: 144rpx 0 30rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);		padding-bottom: env(safe-area-inset-bottom);
		//内容
		.content{
			background-color: #fff;
			padding: 28rpx 20rpx;
			margin: 30rpx 0;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 44rpx;
				color: #333333;
			}
			.text{
				width: 100%;
				margin: 24rpx 0;
				.biaoqing{
						display: inline-block;
						padding: 6rpx 20rpx;
						background: rgba(219, 169, 84, 0.1);
						color: #de9c00;
						border-radius: 22rpx;
						font-size: 22rpx;
						text-align: center;
						// width: 20%;
						margin-right: 10rpx;
				}
				.offer{
					font-size: 26rpx;
					color: #505050;
					margin-right: 10rpx;
				}
				.area{
					width: 50%;
				}
			}
			.swiper-content{
				position: relative;
				.num{
					z-index: 9;
					color: #fff;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 20px;
					padding: 0rpx 28rpx;
					background: rgba(51, 51, 51, 0.6);
					border-radius: 28rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
				.video{
					width: 654rpx;
					height: 272rpx;
					border-radius: 8rpx;
					position: relative;
				}
				.icon-bofang{
					width: 72rpx;
					height: 72rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 50%;
					color: #fff;
					font-size: 28rpx;
					position: absolute;
					left: 44%;
					top:40%;
				}
			}
			.bottom{
				margin: 24rpx 0;
				.left{
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20rpx;
					color: #6C6C6C;
					view{
						margin-right: 40rpx;
						text{
							&:first-child{
								margin-right: 10rpx;
							}
						}
					}
				}
				.right{
					padding: 10rpx 20rpx;
					background: #FFFFFF;
					border: 1px solid #505050;
					border-radius: 26rpx;
					font-weight: 400;
					line-height: 20rpx;
					color: #505050;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
